<template>
	<view>


		<view class="goods_c">
			<view class="type_text">
				优惠
			</view>
			<view class="item_r" @click="open">
				<text class="item_text">有可领取的优惠券</text>
				<text class="iconfont fr icon-xiayiyeqianjinchakangengduo"></text>
			</view>
		</view>


		<u-popup :show="show" :round="10" mode="bottom" @close="close" :closeable="true">
			<view class="services">
				<view class="p_name">优惠券</view>
				<view class="coupon-item" v-for="(item, index) in coupons" :key="index">
					<view class="item-wrapper"
						:class="item.check == 1 ? 'color-' +  COMMON.color[index % COMMON.color.length] : 'gray'">
						<view class="coupon-type">满减券</view>
						<view class="tip">
							<view>
								<text class="money">￥{{item.reduce_price}}</text>
							</view>
							<text class="pay-line">满{{item.min_price}}元可用</text>
						</view>
						<view class="split-line"></view>
						<view class="content">
							<view class="title">{{item.name}}</view>
							<view class="bottom">
								<view class="time">
									<text v-if="item.expire_type == 20">{{ item.start_time }}~{{ item.end_time }}</text>
									<text v-else>领取{{item.expire_day}}天内有效</text>
								</view>
								<text class="time">限领{{item.limit_quantity}}张</text>
								<view class="receive" v-if="item.check == 1" @click="receive_coupon(item.coupon_id)">
									<text>立即领取</text>
								</view>
								<view class="receive" v-else-if="item.check == 2"><text>已领取</text></view>
								<view class="receive" v-else><text>该券已领完</text></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		defineEmits
	} from 'vue';
	import { onShow	} from '@dcloudio/uni-app';
	import { COMMON	} from "@/utils/commom.js"
	import { useAuthStore } from '@/stores/user.js';
	import { get_coupon, add_coupon	} from "@/api/coupon.js"
	
	
	const emit = defineEmits(['callback_coupon']);
	
	// 定义 props
	const props = defineProps({
		coupons: {
			type: Array,
			required: true, // 根据需要设置为 required
		},
	});

	// 监听变化
	watch(() => props.coupons, () => {
		if (props.coupons.length) {
			// console.log(props.coupons)
		}
	}, {
		immediate: true
	});

	// 定义响应式状态
	const show = ref(false);

	// 打开弹窗的方法
	const open = () => {
		show.value = true;
	};

	// 关闭弹窗的方法
	const close = () => {
		show.value = false;
	};
	
	
	// 领取优惠券
	function receive_coupon(coupon_id){
		add_coupon(coupon_id).then(res => {
			uni.showToast({
			    title: res.msg,
				icon: "none",
				success() {
					setTimeout(function () {
					    emit('callback_coupon', res.status);
					}, 1000);
				}
			});
		})
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/goods_components.scss';
	@import "@/static/css/coupon.scss";

	.services {
		height: 40vh;
		padding: 50rpx;

		.p_name {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			text-align: center;
			padding-bottom: 50rpx;
		}
	}
</style>